import React from 'react'
import ReactECharts from 'echarts-for-react'
import {messageModal} from "../../../common/date"
import {getUserDistanChart} from '../actions/index'
import {Loading} from "@hi-ui/hiui";

class userDistant extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            distantArr: [],
            freqArr: [],
            sig: true
        }
    }


    async componentDidMount() {
        this.fgetUserDistanChart()
    }

    fgetUserDistanChart() {
        getUserDistanChart().then(res => {
            if (res.code === 200) {
                let farr = res.data.data
                let darr = []
                for (let i = 0; i < farr.length; i++) {
                    darr.push('<' + (i + 1) + 'Km')
                }
                this.setState({
                    distantArr: darr,
                    freqArr: farr,
                    sig: !this.state.sig
                })
            } else {
                messageModal('warning', res.data.message)
            }
        }).finally((err) => {

        })
    }

    userDistanChart() {
        const {distantArr, freqArr} = this.state
        // console.log(distantArr,freqArr)
        return {
            title: {
                text: '用户出行地两点间距离统计',
                subtext: '数据源: foursqure NYC'
            },
            grid: {
                y: 70,
                y2: 40
            },
            xAxis: {
                type: 'category',
                data: distantArr
            },
            yAxis: {
                type: 'value',
                axisLine: {show: true}
            },
            tooltip: {
                // trigger: 'axis',
                showDelay: 0,
                formatter: function (params) {
                    return ('距离: ' + params.name + '<br/>到访频率: ' + params.value)
                }
            },
            series: [
                {
                    data: freqArr,
                    type: 'line',
                    smooth: true
                }
            ]
        }

    }

    render() {
        const {distantArr} = this.state
        // console.log(distantArr)
        return (
            <div className={'bodycontent'}>
                <div className={'userdistanchart'} style={{marginTop:'10%',marginBottom:'12%'}}>
                    <Loading visible={!distantArr.length > 0}><ReactECharts
                        style={{height: "400px"}}
                        option={this.userDistanChart()}/> </Loading>
                </div>
            </div>
        )
    }
}

export default userDistant
